/* clock.css */
#ClockComponents {
    display: flex;
    flex-wrap: wrap;
    margin: 50px auto;
    width: 500px;
    align-items: center;
    justify-content: center;
    color: #9FC6FD;
    font-weight: lighter;
}
.calendars {
    width: 100%;
    align-items: flex-end;
    display: flex;
    justify-content: center;
    position: relative;
    font-size: 2rem;
    letter-spacing: 5px;
}
.week {
    position: absolute;
    right: 100px;
    font-size: 1.6rem;
}
.clock {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7rem;
    display: flex;
}
.hour {
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100px;
    box-sizing: border-box;
}
.minutes {
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100px;
    box-sizing: border-box;
}
.clock span {
    margin: 0 10px;
}

#ClockComponents.night {
    width: 300px;
    position: absolute;
    right: 0;
    bottom: 5vh;
    color: #fffd;
    justify-content: flex-start;
}

#ClockComponents.night .clock {
    align-items: center;
    justify-content: flex-start;
}

#ClockComponents.night .calendars {
    align-items: center;
    justify-content: flex-start;
}
#ClockComponents.night .calendars .week {
    left: 190px;
}

#message {
    font-size: 1.2rem;
    text-align: center;
    /* border: solid; */
}